<script setup>
  import { ref, reactive, toRaw, computed, onMounted, watch } from 'vue'
  import ToggleContent from '@/hqbadmin/components/ToggleContent.vue'
  const props = defineProps(['item'])
</script>

<template>
  <!-- item:{{item}} -->
  <div class="overflow-hidden border rounded">
    <div class="flex items-center p-2 text-white bg-indigo-500">
      <div class="flex-1">{{item.type > 0 ? '花旗挑战' : '自选赛道'}}</div>
      <div>{{item.agree > 0 ? '同意' : '拒绝'}}</div>
    </div>
    <!-- baseinfo -->
    <div class="grid grid-cols-1 gap-4 p-4 bg-white sm:grid-cols-2">
      <div class="flex items-center" v-if="item.type <= 0">
        <b class="text-slate-500">团队类型</b>
        <div class="flex-1 ml-2">{{item.teamType > 0 ? '人工智能-风险控制' : '人工智能-幻觉偏差'}}</div>
      </div>
      <div class="flex items-center" v-if="item.esgName">
        <b class="text-slate-500">人工智能-风险控制</b>
        <div class="flex-1 ml-2">{{item.esgName}}</div>
      </div>

      <div class="flex items-center" v-if="item.vEName">
        <b class="text-slate-500">人工智能-幻觉偏差</b>
        <div class="flex-1 ml-2">{{item.vEName}}</div>
      </div>
      <div class="flex items-center">
        <b class="text-slate-500">项目名称</b>
        <div class="flex-1 ml-2">{{item.projectName}}</div>
      </div>

      <div class="flex items-center">
        <b class="text-slate-500">团队名称</b>
        <div class="flex-1 ml-2">{{item.teamName}}</div>
      </div>
      <div class="flex items-center">
        <b class="text-slate-500">团队队长手机号</b>
        <div class="flex-1 ml-2">{{item.teamPhone}}</div>
      </div>
    </div>

    <div class="p-2 space-y-2">
      <!-- 队长信息 -->
      <div class="overflow-auto rounded">
        <ToggleContent title="队长信息">
          <div class="grid grid-cols-1 gap-4 p-4 bg-white sm:grid-cols-2" v-for="it in item.teamInfo" :key="it.name">
            <div class="flex items-center">
              <b class="text-slate-500">姓名</b>
              <div class="flex-1 ml-2">{{it.name}}</div>
            </div>
            <div class="flex items-center">
              <b class="text-slate-500">性别</b>
              <div class="flex-1 ml-2">{{it.gender}}</div>
            </div>
            <div class="flex items-center">
              <b class="text-slate-500">微信号</b>
              <div class="flex-1 ml-2">{{it.wechat}}</div>
            </div>
            <div class="flex items-center">
              <b class="text-slate-500">邮箱</b>
              <div class="flex-1 ml-2">{{it.email}}</div>
            </div>
            <div class="flex items-center">
              <b class="text-slate-500">高校名称</b>
              <div class="flex-1 ml-2">{{it.school}}</div>
            </div>
            <div class="flex items-center">
              <b class="text-slate-500">专业名称</b>
              <div class="flex-1 ml-2">{{it.major}}</div>
            </div>
            <div class="flex items-center">
              <b class="text-slate-500">年级</b>
              <div class="flex-1 ml-2">{{it.grade}}</div>
            </div>
          </div>
        </ToggleContent>
      </div>
      <!-- 指导老师信息 -->
      <ToggleContent title="指导老师信息">
        <div class="p-2 space-y-2 bg-indigo-50">
          <template v-for="it in item.teacher" :key="it.name">
            <div class="grid grid-cols-1 gap-2 p-2 bg-white sm:grid-cols-2">
              <div class="flex items-center">
                <b class="text-slate-500">姓名</b>
                <div class="flex-1 ml-2">{{it.name}}</div>
              </div>
              <div class="flex items-center">
                <b class="text-slate-500">性别</b>
                <div class="flex-1 ml-2">{{it.gender}}</div>
              </div>
              <div class="flex items-center">
                <b class="text-slate-500">手机号</b>
                <div class="flex-1 ml-2">{{it.phone}}</div>
              </div>
              <div class="flex items-center">
                <b class="text-slate-500">邮箱</b>
                <div class="flex-1 ml-2">{{it.email}}</div>
              </div>
              <div class="flex items-center">
                <b class="text-slate-500">高校名称</b>
                <div class="flex-1 ml-2">{{it.school}}</div>
              </div>
              <div class="flex items-center">
                <b class="text-slate-500">职业名称</b>
                <div class="flex-1 ml-2">{{it.job}}</div>
              </div>
            </div>
          </template>
        </div>
      </ToggleContent>
      <!-- 团队成员 -->




      <ToggleContent title="团队队员">
        <div class="p-2 space-y-2 bg-indigo-50">
          <template v-for="it in item.teamMember" :key="it.name">
            <div class="grid grid-cols-1 gap-2 p-2 bg-white sm:grid-cols-2">
              <div class="flex items-center">
                <b class="text-slate-500">姓名</b>
                <div class="flex-1 ml-2">{{it.name}}</div>
              </div>
              <div class="flex items-center">
                <b class="text-slate-500">性别</b>
                <div class="flex-1 ml-2">{{it.gender}}</div>
              </div>
              <div class="flex items-center">
                <b class="text-slate-500">手机号</b>
                <div class="flex-1 ml-2">{{it.phone}}</div>
              </div>
              <div class="flex items-center">
                <b class="text-slate-500">邮箱</b>
                <div class="flex-1 ml-2">{{it.email}}</div>
              </div>
              <div class="flex items-center">
                <b class="text-slate-500">高校名称</b>
                <div class="flex-1 ml-2">{{it.school}}</div>
              </div>
              <div class="flex items-center">
                <b class="text-slate-500">专业名称</b>
                <div class="flex-1 ml-2">{{it.major}}</div>
              </div>
              <div class="flex items-center">
                <b class="text-slate-500">年级</b>
                <div class="flex-1 ml-2">{{it.grade}}</div>
              </div>
            </div>
          </template>
        </div>
      </ToggleContent>
    </div>

  </div>
</template>

<style lang="scss" scoped>

</style>